/*
Theme Name: Suntec Singapore
Theme URI: http://consultancy.canneman.com
Author: Richard Canneman
Description: Suntec Singapore Convention & Exhibition Centre
Version: 0.1.1
*/


/*--------------------------------------------------------------
HTML
-------------------------------------------------------------- */

html { height: 100% }
body {
    position: relative;
    min-width: 320px;
    min-height: 100%;
    font: normal 10px;
    background: #f4f4f4;
    font-family: "Verdana", sans-serif;
}

a { color: #3598db; text-decoration: none; }
a:hover { color: #cccccc }
a:focus { outline: 0 }


ul, li, menu, dir, ol {
margin: 0;
padding: 0;
}

ol, ul { list-style: none }

.river {color:#3598db;}
.ocean {color:#34495e;}
.sun {color:#F1C40F;}
.cloud {color:#f4f4f4;}
.concrete {color:#95A5A6;}
.gray {color:#cecece;}

hr  { 
    border: 0;
    border-bottom: 1px dashed #ECF0F1; }

h1 {
  font-size: 18px;
  font-weight: normal;
  line-height: 22px;
  display: block; 
  margin: 0;
  }

h2 {
  font-size: 32px;
  font-weight: normal;
  line-height: 36px;
  display: block; 
  margin: 0;
  color:#95A5A6;
  }

h3 {
  font-size: 12px;
  text-transform: uppercase;
  line-height: 14px;
  display: block; 
  margin: 0;
  }
h4 {
  font-size: 12px;
  text-transform:none;
  line-height: 14px;
  display: block; 
  margin: 0;
  }

h5 {
  font-size: 11px;
  text-transform: uppercase;  
  line-height: 12px;
  display: block; 
  margin: 0;
  }
  


/*--------------------------------------------------------------
HEADER
-------------------------------------------------------------- */

#header {
   	 clear: both;
   	 position: fixed;
   	 width: 100%;
   	 z-index: 500;
   	 height: 85px;
   	 background: #FFFFFF;
}

.inside {max-width: 1144px;
    	margin: 0 auto;
	}


.logo {float: none; width: 100%; margin: 10px 0 auto; text-align: center; }


/*--------------------------------------------------------------
HOME
-------------------------------------------------------------- */

body.home {
    height: 100%;
    min-height: 720px;
}
@media only screen and (max-width: 749px) {body.home { min-height: 100% !important }}
@media only screen and (min-width: 750px) and (max-height: 720px) { body.home { min-height: 600px }}

#home {
    overflow: hidden;
    position: absolute;
    z-index: 100;
    top: 60px;
    bottom: 120px;
    right: 0;
    left: 0;
    background: #525252;
    color: #fff;
    font: normal 900 10px;
    line-height: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    -webkit-transition: top 0.375s ease-in-out;
    -o-transition: top 0.375s ease-in-out;
    -moz-transition: top 0.375s ease-in-out;
    -ms-transition: top 0.375s ease-in-out;
    transition: top 0.375s ease-in-out;
}
@media only screen and (max-width: 749px) { #home {overflow: visible; position: static; padding: 0;}}

#home:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 150;
    height: 360px;
    background: -moz-linear-gradient(top, rgba(23,10,3,0) 0%, #170a03 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(23,10,3,0)), color-stop(100%, #170a03));
    background: -webkit-linear-gradient(top, rgba(23,10,3,0) 0%, #170a03 100%);
    background: -o-linear-gradient(top, rgba(23,10,3,0) 0%, #170a03 100%);
    background: -ms-linear-gradient(top, rgba(23,10,3,0) 0%, #170a03 100%);
    background: linear-gradient(to bottom, rgba(23,10,3,0) 0%, #170a03 100%);
}
@media only screen and (max-width: 749px) { #home:before { display: none }}

#home a { color: #fff }

#home .inner {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    padding: 85px 28px 0;
}

@media only screen and (max-width: 749px) { #home .inner {position: static;padding: 0;}}

#home .wrapper {position: relative; max-width: 1144px; margin: 0 auto;}
@media only screen and (max-width: 749px) { #home .wrapper { position: relative; margin: 0 auto; text-align: center;}}


.feature {width: 90%;}


#home h2 {
    border-bottom: 1px solid #cccccc;
    padding: 0 0 4px;
    color: #fff;
    font-size: 10px;
    line-height: 20px;
    text-transform: uppercase;
    width: 90%;
}
@media only screen and (max-width: 749px) { #home h2 {color: #cccccc; font-size: 9px; line-height: 10px;}}

#home .more {
    border: 0;
    padding: 5px 0 0;
    font-size: 10px;
    text-align: right;
}
    #home .more a { color: #cccccc }
    #home .more a:hover { color: #fff }
@media only screen and (max-width: 749px) { #home .more { line-height: 1 }}

#home-featured {
    float: left;
    width: 66.66%;
    padding: 0 0 60px;
}


#home-login {
    float: left;
    width: 33.33%;
    padding: 0;
    text-align: center;
}

#home-thankyou {
    float: left;
    width: 90%;
    padding: 0 0 60px;
}

@media only screen and (max-width: 749px) { #home-featured { float: none; width: auto; padding: 15px 20px 0;}}
@media only screen and (max-width: 749px) { #home-login { float: none; width: auto; padding: 0 20px 20px; }}
@media only screen and (max-width: 749px) { #home-thankyou { float: none; width: auto; padding: 15px 20px 0;}}

#home-featured h3, #home-login h3, #home-thankyou h3 {
    margin: 12px 0 0;
    font-size: 28px;
    line-height: 30px;
}

@media only screen and (max-width: 749px) { #home-featured h3, #home-login h3, #home-thankyou h3  { margin: 8px 0 4px; font-size: 18px; line-height: 20px;}}
@media only screen and (min-width: 750px) and (max-width: 990px) {#home-featured h3, #home-login h3, #home-thankyou h3  { font-size: 28px; line-height: 30px;}}


#home-featured p, #home-login p, #home-thankyou p {
    padding: 0 20px 0 0;
    font: normal 400 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;

}

#home-login p {
    padding: 0;}
    
@media only screen and (max-width: 749px) { 
	#home-featured p, #home-login p, #home-thankyou p {
	    max-width: none;
	    padding: 0;
	    font-size: 12px;
	    line-height: 16px;
	}
}


#home-featured a, #home-login a, { display: block }
#home-featured a:hover, #home-login a:hover,  { color: #cccccc !important }
#home-featured-image-bw,
#home-featured-image {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
}
@media only screen and (max-width: 749px) { 
	#home-featured-image-bw,
	#home-featured-image {
	    display: block !important;
	    position: static;
	    width: 100% !important;
	    height: auto !important;
	    margin: 0 !important;
	}
}


#home-featured-image-bw {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0s linear 0.45s;
    -o-transition: opacity 0s linear 0.45s;
    -moz-transition: opacity 0s linear 0.45s;
    -ms-transition: opacity 0s linear 0.45s;
    transition: opacity 0s linear 0.45s;
}
.storyActive #home-featured-image-bw {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -o-transition: opacity 0s linear;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    transition: none;
}
@media only screen and (max-width: 749px) { 
	#home-featured-image-bw { display: none !important }
}


#home-featured-image {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 0.45s ease-in-out;
    -o-transition: opacity 0.45s ease-in-out;
    -moz-transition: opacity 0.45s ease-in-out;
    -ms-transition: opacity 0.45s ease-in-out;
    transition: opacity 0.45s ease-in-out;
}
.storyActive #home-featured-image {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.6s ease-in-out;
    -o-transition: opacity 0.6s ease-in-out;
    -moz-transition: opacity 0.6s ease-in-out;
    -ms-transition: opacity 0.6s ease-in-out;
    transition: opacity 0.6s ease-in-out;
}
@media only screen and (max-width: 749px) { 
	.storyActive #home-featured-image {
	    opacity: 1;
	    filter: alpha(opacity=100);
	}
}


#home h2,
#home-featured,
#home-featured a, {
    -webkit-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-o ut;
    transition: color 0.2s ease-in-out;
}



/*-
.sscec { margin: 0 10px; width: 200px; height:100px;}
@media only screen and (max-width: 749px) {.sscec {margin: 0 10px 30px 0; width: 180px; height:90px;}}
@media only screen and (max-width: 500px) {.sscec {margin: 0 5px 30px 0; width: 120px; height:60px;}}
 */
 
.scm { margin: 0 10px; width: 200px; height:100px;}
@media only screen and (max-width: 749px) {.scm {margin: 0 10px 30px 0; width: 180px; height:90px;}}
@media only screen and (max-width: 500px) {.scm {margin: 0 5px 30px 0; width: 120px; height:60px;}}


/*--------------------------------------------------------------
FOOTER
-------------------------------------------------------------- */


#foot {
    position: fixed;
    z-index: 200;
    bottom: 0;
    right: 0;
    left: 0;
    height: 140px;
    padding: 0 28px;
    background: #f4f4f4;
    line-height: 18px;
    font-size: 11px;
    text-decoration: none;
    font-weight: normal;
    text-align:center;
    
}

@media only screen and (max-width: 749px) { 
	#foot {overflow: visible; position: static; height: auto; padding: 0; *zoom: 1;}
	#foot:before, #foot:after {content: ' '; display: table;}
	#foot:after { clear: both } } 


#foot .inner {
    position: relative;
    max-width: 1144px;
    height: auto;
    margin: 0 auto;
}
@media only screen and (max-width: 749px) { 
	#foot .inner { height: auto }
}


#foot a { color: #737373; 
text-decoration: none;}

#foot a:hover { color: #386fb1; 
text-decoration: none;
}


.left {float:left; width:340px; text-align: center; font-size: 16px; color: #95A5A6; margin-top: 40px;} 
@media only screen and (max-width: 749px) { .left { width:100%; margin: 20px auto; float:none; text-align: center; margin-bottom: 20px }}

.left img {float: left; margin: -15px 10px 0 auto; }
@media only screen and (max-width: 749px) { .left img  { display:none; }}

.right {float: right; width:33%; text-align: right; margin: 10px 70px 0 0;}
@media only screen and (max-width: 749px) { .right { width:100%; margin: 0 0 0 0; float:none; text-align: center;}}


/*--------------------------------------------------------------
OTHER
-------------------------------------------------------------- */


#content {
    max-width: 1144px;
    margin: 0 auto;
    padding: 0 28px 180px;
    color: #594a42;
    *zoom: 1;
}

#content:after { clear: both }
@media only screen and (max-width: 749px) { 
	#content {
	    margin: 0;
	    padding: 0;
	}
}


@media only screen and (min-width: 750px) and (max-width: 990px) { 
	#content { padding-bottom: 240px }
}
  

#form { padding-top: 15px;}
@media only screen and (max-width: 749px) { #form { padding-top: 0;}}

.input {
	background: #f5f5f5;
	border: 1px solid #c3c3c3;
    width: 250px;;
    height: 28px; 
    font-size: 12px;
    border: 0;
    margin: 2px;
    outline: 0;
    padding: 2px;
    color: #b7b7b7;
    line-height: normal;
    text-align: center;
}

.input::-webkit-input-placeholder { color: #a2a2a2 }
.input:-moz-placeholder { color: #a6a6a6 }
@media only screen and (max-width: 749px) { .input {height: 28px; font-size: 12px;}}


#button {
    overflow: visible;
    width: auto;
    height: 48px; 
    font-size: 18px;
    border: 0;
    margin: 0 0 0 5px;
    padding: 0 9px;
    background: #2985c7;
    color: #fff;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
@media only screen and (max-width: 749px) { #button {height: 32px; font-size: 12px;}}

#goldbutton {
    overflow: visible;
    width: auto;
    height: 28px; 
    font-size: 14px;
    border: 0;
    margin: 15px 0 0 5px;
    padding: 0 9px;
    background: #2985c7;
    color: #fff;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
@media only screen and (max-width: 749px) { #goldbutton {height: 24px; font-size: 12px;}}


#button:hover { background: #34495e }




/*--------------------------------------------------------------
ALIGNMENT
-------------------------------------------------------------- */


.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

.clear {clear:both;}

.error { color: red;}